<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="http://124.221.62.120:3000/api/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="./node_modules/art-template/lib/template-web.js"></script>
  <script src="./node_modules/axios/dist/axios.min.js"></script>
  <script src="./config.js"></script>
  <link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
  <link rel="stylesheet" href="./src/css/view/view.css">
  <link rel="stylesheet" href="./src/css/view/swiper_card.css">
  <link rel="stylesheet" href="./src/css/view/view_comment.css">
  <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> -->
  <link rel="stylesheet" href="./node_modules/swiper/swiper-bundle.min.css" />
</head>

<body>
  <!-- 提示框 -->
  <div id="toast-top" class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="http://124.221.62.120:3000/api/uploads/favicon.ico" style="width: 30px;" class="rounded me-2"
          alt="..." />
        <strong class="me-auto"></strong>
        <small>刚刚</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
  </div>
  <div class="container nav-bar">
    <div class="row row-cols-4">
      <div class="col-sm-8 nav-box">
        <ul class="nav-ul">
          <li><a href="./index.html">首页</a></li>
          <li><a href="#">科技</a></li>
          <li><a href="#">娱乐</a></li>
          <li><a href="#">体育</a></li>
          <li><a href="#">财经</a></li>
          <li><a href="#">健康</a></li>
          <li><a href="#">汽车</a></li>
          <li id="more_down"><i class="bi bi-chevron-double-down"></i></li>
        </ul>
        <div class="more">
          <ul class="more-ul">
            <li><a href="#">政务</a></li>
            <li><a href="#">国际</a></li>
            <li><a href="#">房产</a></li>
            <li><a href="#">教育</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">专栏</a></li>
        </div>
      </div>
      <div class="col-sm-4 nav-box">
        <div class="login_btn"><a href="./login.html"><button type="button"
              class="btn btn-outline-success">登录</button></a></div>
        <div class="logout_btn"><a href="javascript:;"><button type="button"
              class="btn btn-outline-success">退出登录</button></a></div>

        <div class="user_info" style="display: none;"><a href="./profile.html"><img class="user_show_img"
              src="http://124.221.62.120:3000/api/uploads/1652535030860592ce69cc2b0bb312f5ec5d4d2ee199e98b8584d.jpg"
              alt="..."></a>

        </div>
        <div class="user_username" style="display: none;"><a href="#">用户名</a></div>

      </div>

    </div>
  </div>
  <div class="news_container">
    <div class="container news_box">
      <div class="row row-cols-4">
        <div id="template_content" class="col-sm-8">

        </div>

        <script type="text/html" id="template">

          <!-- keyword -->
        <p class="news_keyword">
          <%=results.keyword %> 新闻>正文
        </p>
        <!-- title -->
        <h1 class="h1_title">
          <%=results.title%>
        </h1>
        <div class="time_show">
          <span>
            <%=results.date %>
          </span>
          <div class="user_edit_text">
            <span><i class="bi bi-zoom-in"></i></span>
            <span><i class="bi bi-zoom-out"></i></span>
            <span><i class="bi bi-arrows-collapse"></i></span>
            <span><i class="bi bi-arrows-expand"></i></span>
            <span><i class="bi bi-type-bold"></i></span>
            <span><i class="bi bi-type-italic"></i></span>
            <span><i class="bi bi-type-underline"></i></span>
            <span><i class="bi bi-eye-fill"></i></span>
            <span class="pageviews">
              <%=results.pageViews %>
            </span>
          </div>
        </div>
        <div class="news_text_container">
          <div class="news_img">
            <img src="http://124.221.62.120:3000<%=results.imgsrc %>" alt="">
          </div>
          　<div class="text">
            <%=results.text %>
          </div>
        </div>
        </script>
        <!-- 侧边栏 -->
        <div class="col-sm-4 news_side_box">
          <div class="user_search">
            <div class="input-group flex-nowrap" style="margin-top: 30px;">
              <span class="input-group-text" id="addon-wrapping">搜索</span>
              <input type="text" class="form-control" id="ipt" placeholder="输入关键词" aria-label="Username"
                aria-describedby="addon-wrapping">
            </div>
            <!-- 搜索建议列表 -->
            <div id="suggest-list" style="width: 500px;">
              <ol class="list-group list-group-numbered">


              </ol>
            </div>
            <!-- 模板结构 -->

            <script type="text/html" id="tpl-suggestList">
               <ol class="list-group list-group-numbered">
                {{each result}}
                <!--搜索建议项-->
                   <li class="list-group-item"><a style="text-decoration: none;" href="http://124.221.62.120/newsclient/view.html?newsid={{$value.newsid}}">{{$value.title}}</a></li>
                {{/each}}
                  </ol>

            </script>
          </div>
          <div class="swiper_container">
            <div class="swiper mySwiper">
              <div class="swiper-wrapper">
                <!-- <div class="swiper-slide">
                  <div class="slide-img"><img src="http://124.221.62.120:3000/api/uploads/1652443524042nimg.ws.126.jpg"
                      alt=""></div>
                  <div class="swiper_title">
                    <h3><a href="">马斯克、教皇、土耳其……谁能拯救亚速钢铁厂守军？</a></h3>
                  </div>
                  <div class="siwper_time">
                    <p>2022-12-12 12:12</p>
                  </div>
                  <div class="siwper_info">
                    <span class="keyword">军事</span><span class="page_views"><i class="bi bi-eye-fill"></i>35</span>
                  </div>
                </div> -->

              </div>

            </div>
          </div>
          <div class="recommTitle">
            <h1><span></span>新闻排行</h1>
          </div>
          <div class="recommList">
            <ul>

              <!-- <li class="lis"><a href="#">2022年4月25日当地时间晚22点</a></li> -->
            </ul>
          </div>
          <!-- Swiper -->
          <div class="swiper_lunfan">
            <div class="swiper mySwiper-lunfan">
              <div class="swiper-wrapper" id="swiper_lunfan">
                <!-- 遍历 -->
                <!-- <div class="swiper-slide"><a href="#">
                    <img
                      src="http://124.221.62.120:3000/api/uploads/1652449447444cb3b-df73dfb6cfcc62363b21dd431c32bbcb.jpg">
                  </a>
                </div> -->


              </div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
              <div class="swiper-pagination"></div>
            </div>
          </div>
        </div>

        <div class="col-sm-8 comment-big-box">
          <div class="form-floating">
            <textarea class="form-control" placeholder="发布评论" id="comment_texteara" style="height: 100px"></textarea>
            <label>发布评论</label>
          </div>
          <button id="put_comment_btn" class="btn btn-success" style="float: right; margin-top:20px;">发表评论</button>
        </div>
        <div class="comments-container">
          <h1>评论区 </h1>

          <ul id="comments-list" class="comments-list">

            <!-- <li>

            <div class="comment-avatar"><img
                src="http://i9.photobucket.com/albums/a88/creaticode/avatar_1_zps8e1c80cd.jpg" alt=""></div>

            <div class="comment-box">
              <div class="comment-head">
                <h6 class="comment-name by-author"><a href="http://creaticode.com/blog">Agustin Ortiz</a>
                </h6>
                <span>hace 20 minutos</span>

                <i class="bi bi-reply-fill"></i>
                <i class="bi bi-hand-thumbs-up-fill">2</i>
              </div>
              <div class="comment-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure
                laudantium vitae, praesentium optio, sapiente distinctio illo?
              </div>
            </div>
        </div>

        </li> -->



          </ul>
        </div>

      </div>
    </div>
  </div>
  </div>




  <!-- Swiper JS -->
  <!-- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> -->
  <script src="./node_modules/swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      effect: "cards",
      grabCursor: true,
    });
  </script>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>

  </script>
  <script src="./src/js/view/view.js"></script>
  <script src="./src/js/view/swiper_card.js"></script>
  <script src="./src/js/view/comment.js"></script>
  <script src="./src/js/view/search.js"></script>
  <script src="./src/js/nav/search.js"></script>
  <script>
    $(function () {
      // 1. 定义延时器的Id
      var timer = null
      // 定义全局缓存对象
      var cacheObj = {}

      // 2. 定义防抖的函数
      function debounceSearch(kw) {
        timer = setTimeout(function () {
          getSuggestList(kw)
        }, 500)
      }

      // 为输入框绑定 keyup 事件
      $('#ipt').on('keyup', function () {
        // 3. 清空 timer
        clearTimeout(timer)
        var keywords = $(this).val().trim()
        if (keywords.length <= 0) {
          return $('#suggest-list').empty().hide()
        }

        // 先判断缓存中是否有数据
        if (cacheObj[keywords]) {
          return renderSuggestList(cacheObj[keywords])
        }

        // TODO:获取搜索建议列表
        // console.log(keywords)
        // getSuggestList(keywords)
        debounceSearch(keywords)
      })

      function getSuggestList(kw) {
        $.ajax({
          url: `${apirUrl}/api/search_news?keyword=${kw}&page=1&lines=10`,
          // dataType: 'jsonp',
          success: function (res) {
            console.log(res)
            renderSuggestList(res)
          }
        })
      }

      // 渲染UI结构
      function renderSuggestList(res) {
        if (res.result.length <= 0) {
          return $('#suggest-list').empty().hide()
        }
        var htmlStr = template('tpl-suggestList', res)
        $('#suggest-list').html(htmlStr).show()

        // 1. 获取到用户输入的内容，当做键
        var k = $('#ipt').val().trim()
        // 2. 需要将数据作为值，进行缓存
        cacheObj[k] = res
      }
      //鼠标移出，就让 suggest-list 消失
      $('#suggest-list').on('mouseleave', function () {
        $(this).hide()
      })

    })
  </script>
</body>

</html>